<template>
	<view>
		<view class="content">
			
			<view class="agora-view">
			  <view class="agora-video1">
			    <StreamPlayer :stream="localStream" :domId="localStream.getId()" v-if="localStream"></StreamPlayer>
			  </view>
			  <view class="agora-video2" :key="index" v-for="(remoteStream, index) in remoteStreams">
			    <StreamPlayer :stream="remoteStream" :domId="remoteStream.getId()"></StreamPlayer>
			  </view>
			</view>  
			<view class="button">
				<button @click="joinEvent()">接听</button>
				<button @click="leaveEvent()" style="background-color: #00CE47;">挂断</button>
			</view>
			 
		</view>
		
	</view>
</template>

<script>
	import RTCClient from "../../../components/agora/agora-rtc-client.js";
	import StreamPlayer from "./stream-player.vue";
	import { log } from '../../../components/agora/utils.js'
	
	export default {
	  components: {
	    StreamPlayer
	  },
	  data () {
	    return {
	      option: {
	        appid: '528e388bcfca46cdaea9dad1ea9ecf5d',
	        token: '006528e388bcfca46cdaea9dad1ea9ecf5dIADKsldAC5odL6fx+EJUweGocgHK+sn8wh9+aeRTUURU9ZSQDEgAAAAAEACBOFkKwqDBYQEAAQDIoMFh',
	        uid: null,
	        channel: '0525',
	      },
	      showJoin: false,
	      localStream: null,
	      remoteStreams: [],
	    };
	  },
	  props: {
	    msg: String
	  },
	  
	  methods: {
	    joinEvent () {
	      if(!this.option.appid) {
	        this.judge('Appid')
	        return
	      }
	      if(!this.option.channel) {
	        this.judge('Channel Name')
	        return
	      }
	      this.rtc.joinChannel(this.option).then(() => {
	        uni.showToast({
	          message: 'Join Success',
	          type: 'success'
	        });
	        this.rtc.publishStream().then(() => {//创建音视频流 并且进行推流
	          uni.showToast({
	            title: 'Publish Success',
	          
	          });
	          this.localStream = this.rtc.localStream// 音视频流对象
	        }).catch((err) => {
	          uni.showToast('Publish Failure');
	          log('publish local error', err)
	        })
	      }).catch((err) => {
	        uni.showToast('Join Failure');
	        log('join channel error', err)
	      })
	      this.showJoin = true
	    },
	    leaveEvent () {
	      this.showJoin = false
	      this.rtc.leaveChannel().then(() => {//离开频道
	        uni.showToast({
	          title: 'Leave Success',
	         
	        });
	      }).catch((err) => {
	        uni.showToast.error('Leave Failure')
	        log('leave error', err)
	      })
	      this.localStream = null
	      this.remoteStreams = []
	    },
	    judge(detail) {
	      uni.showModal({
	        title: 'Notice',
	        content: `Please enter the ${detail}`,
	      });
	    },
	  },
	  created() {
	    this.rtc = new RTCClient()
	    let rtc = this.rtc
	    rtc.on('stream-added', (evt) => {
	      let {stream} = evt
	      log("[agora] [stream-added] stream-added", stream.getId())
	      rtc.client.subscribe(stream) //subscribe  
	    })
	      
	    rtc.on('stream-subscribed', (evt) => {
	      let {stream} = evt
	      log("[agora] [stream-subscribed] stream-added", stream.getId())
	      if (!this.remoteStreams.find((it) => it.getId() === stream.getId())) {
	        this.remoteStreams.push(stream)
	      }
	    })
	
	    rtc.on('stream-removed', (evt) => {
	      let {stream} = evt
	      log('[agora] [stream-removed] stream-removed', stream.getId())
	      this.remoteStreams = this.remoteStreams.filter((it) => it.getId() !== stream.getId())
	    }) 
	  }
	 }
</script>

<style>
	.content{
		background-color: #CCCCCC;
		width: 100%;
		height: 1080px;
	}
	.agora-view{
		position: relative;
		height: 1080px;
	}
	.agora-video1 {
	  position: absolute;
	  width: 100%;
	  height: 1080px;
	
	}
	.agora-video2 {
	 position: absolute;
	 width: 50%;
	 height: 300px;
	}
	.agora-video3{
		position: absolute;
		width: 50%;
		height: 300px;
	}
	.agora-input {
	  margin: 20px;
	}
	.agora-text {
	  margin: 5px;
	  font-size: 16px;
	  font-weight: bold;
	}
	.button{ display: flex;
	  flex-direction: row;
	  justify-content: space-between;}
	button {
       
	  width: 100px;
	  height: 30px;
	  margin-top: 10px;
	  line-height: 30px;
	  font-size: 16px;
	  vertical-align:middle;
	  align-items: center;
	  color: #FFFFFF;
	  border-radius: 20px;
	  background-color: rgb(240, 21, 21);
	}
	
</style>
